<template>
    <div class="my-settings">
        <!--this is MySettings.html!-->
        <head-v :text='title'></head-v>
        <div class="user-info">
            <img src="../../assets/Miku.jpg" class="circle-img" alt="">
            <div class="avatar">
                <p class="username">{{user.name}}</p>
                <p>{{user.department}}-{{user.staff}}</p>
                <!--this is added by yinheng-->
            </div>
            <router-link class="in-icon" to="/userinfo"><i class="icon-angle-right"></i></router-link>
        </div>
        <div class="user-operation">
            <div class="horizon-list">
                <ul>
                    <li>我的财务</li>
                    <li>我的订单</li>
                </ul>
            </div>
            <div class="vertical-list">
                <ul>
                    <li>离线学习<span><i class="icon-angle-right"></i></span></li>
                    <li>学习记录<span><i class="icon-angle-right"></i></span></li>
                </ul>
            </div>
            <div class="vertical-list">
                <ul>
                    <li>我的成绩<span><i class="icon-angle-right"></i></span></li>
                    <li>我的练习<span><i class="icon-angle-right"></i></span></li>
                </ul>
            </div>
            <div class="vertical-list">
                <ul>
                    <li>设置<span><i class="icon-angle-right"></i></span></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
     import Header from '../Header.vue'
    export default{

        data(){
            return{
                user:{ name:'Miku',department:'培训管理部',staff:'培训专员'},
                title:'我的',
            }
        },
        components:{
            HeadV:Header,
        }
    }
</script>
<style lang="scss">
    /*MySettings.vue*/
    @import "../../assets/css/function.scss";
    .my-settings{
        .user-info{
            height:4.6rem;
            background-color:rgb(0,206,169);
            overflow:hidden;
            .circle-img{
                float:left;
                width:3rem;
                height:3rem;
                border-radius:50%;
                margin:0.8rem 1.2rem;
            }
            .avatar{
                float:left;
                margin-top:pxToRem(25px);
                font-size:pxToRem(8px);
                font-family:"微软雅黑";
                color:#fff;
                .username{
                    font-size:pxToRem(18px);
                }       
            }
            .in-icon{
                float:right;
                text-decoration:none;
                color:#fff;
                line-height:4.6rem;
                margin-right:0.7rem;
            }
        }
        .user-operation{
            margin-top:0.4rem;
            font-family:"微软雅黑";
            color:#666;
            .horizon-list{
                padding:pxToRem(8px) pxToRem(10px);
                background-color:#fff;
                ul{
                    overflow:hidden;
                    font-size:pxToRem(18px);
                    li{
                        float:left;
                        list-style:none;
                        width:pxToRem(149px);
                        border-right:1px solid #ccc;
                    }
                    li:last-child{
                        text-indent:pxToRem(10px);
                        border-right:none;
                    }
                }
            }
            .vertical-list{
                margin-top:pxToRem(8px);
                padding:0 pxToRem(10px);
                background-color:#fff;
                ul{
                    overflow:hidden;
                    font-size:pxToRem(18px);
                    li{
                        list-style:none;
                        padding:pxToRem(8px) 0;
                        border-bottom:2px solid rgba(238,238,238,1);
                        span{
                            float:right;
                            color:#aaa;
                        }
                    }
                    li:last-child{
                        border-bottom:none;
                    }
                }
            }
        }
    }
</style>